<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" th:href="@{/component/pear/css/pear.css}"/>
  <style>
    .down {
      color: #1E9FFF;
      text-decoration: underline
    }

    div .base {
      font-size: 13px !important;
    }

    .blue_ {
      color: #0000FF;
      text-decoration: underline;
    }

    .blue_:hover {
      color: red;
    }
  </style>
</head>
<body class="pear-container">

<div class="layui-row" style="margin-bottom: 10px">
  <div class="layui-card">
    <div class="layui-card-body">
      <div class="layui-form" action="">
        <div class="layui-inline">
          <div class="layui-input-inline">
            <input type="text" name="package" placeholder="包名" autocomplete="off" class="layui-input">
          </div>
          <label class="layui-form-label" style="width: 112px;padding-right: 10px">实时修改日志等级</label>
          <div class="layui-input-inline">
            <select name="level" lay-verify="">
              <option value="">请选择日志等级</option>
              <option value="debug">DEBUG</option>
              <option value="info">INFO</option>
              <option value="warn">WARN</option>
              <option value="error">ERROR</option>
            </select>
          </div>
          <div class="layui-input-inline">
            <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="level-set">
              设置
            </button>
            <button class="pear-btn pear-btn-md pear-btn-warming" lay-submit lay-filter="level-get">
              查询
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="layui-row">
  <div class="layui-card">
    <div class="layui-card-body">
      <table id="user-table" lay-filter="user-table"></table>
    </div>
  </div>
</div>


<script type="text/html" id="user-bar">
  <button class="pear-btn pear-btn-success pear-btn-sm" lay-event="read"><i class="layui-icon layui-icon-form"></i>
  </button>
</script>

<script type="text/html" id="pic-column">
  <div onclick="showImg(this)"><img src="{{d.productCover}}" alt="" title="点击放大" width="50px" height="34px"></div>
</script>

<script type="text/html" id="access-column">
  <a class="blue_" href="{{d.filePath}}" title="{{d.filePath}}" target="_blank">点击查看/访问</a>
</script>

<script type="text/html" id="status-column">
  {{# if(d.fileStatus == 1){ }}
  <button class="pear-btn pear-btn-primary pear-btn-xs base">使用中</button>
  {{# }else{ }}
  <button class="pear-btn pear-btn-warming pear-btn-xs base">未使用</button>
  {{# } }}
</script>
<script type="text/html" id="status2-column">
  {{# if(d.existStatus == 1){ }}
  <button class="pear-btn pear-btn-primary pear-btn-xs base">有</button>
  {{# }else{ }}
  <button class="pear-btn pear-btn-warming pear-btn-xs base">无</button>
  {{# } }}
</script>

<script th:src="@{/component/layui/layui.js}"></script>
<script th:src="@{/component/pear/pear.js}"></script>
<script th:src="@{/component/my/const.js}"></script>
<script>


  layui.use(['table', 'form', 'jquery', 'drawer', 'dropdown', 'upload', 'popup'], function () {
    let table = layui.table;
    let form = layui.form;
    let $ = layui.jquery;
    let drawer = layui.drawer;
    let dropdown = layui.dropdown;
    let upload = layui.upload;
    let popup = layui.popup;


    let cols = [
      [
        // {title: '标题', field: 'productTitle', align: 'center'},
        {title: '文件名', field: 'fileName', align: 'center'},
        {title: '文件大小/KB', field: 'size', align: 'center'},
        {title: '文件位置', field: 'filePath', align: 'center'},
        {title: '操作', toolbar: '#user-bar', align: 'center', width: 160, fixed: 'right'}
      ]
    ]

    table.render({
      elem: '#user-table',
      url: suffix + '/logfile/list',
      page: true,
      cols: cols,
      skin: 'line',
      defaultToolbar: ['', '', '']
    });
    // 行工具
    table.on('tool(user-table)', function (obj) {
      if (obj.event === 'read') {
        window.read(obj);
      } else if (obj.event === 'edit') {
        window.edit(obj);
      }
    });

    table.on('toolbar(user-table)', function (obj) {
      if (obj.event === 'import') {
        window.import();
      } else if (obj.event === 'refresh') {
        window.refresh();
      } else if (obj.event === 'batchRemove') {
        window.batchRemove(obj);
      } else if (obj.event === 'importExcel') {
        window.importExcel();
      }
    });

    form.on('submit(user-query)', function (data) {
      table.reload('user-table', {
        where: {
          cond: data.field.cond
        }
      })
      return false;
    });

    // 更改包日志等级
    form.on('submit(level-set)', function (data) {
      let p = {configuredLevel: data.field.level}
      if (data.field.level == '') {
        layer.msg("请选择日志等级")
        return false;
      }
      $.ajax({
        url: suffix + "/actuator/loggers/" + data.field.package,
        dataType: 'json',
        contentType: 'application/json',
        data: JSON.stringify(p),
        type: 'post',
        success: function (res) {
          console.log(res)
        }
      })
      return false;
    });
    // 查询日志等级
    form.on('submit(level-get)', function (data) {
      $.ajax({
        url: suffix + "/actuator/loggers/" + data.field.package,
        dataType: 'json',
        type: 'get',
        success: function (res) {
          layer.alert(JSON.stringify(res))
        }
      })
      return false;
    });

    window.import = function () {
      // 不能删除
    }


    window.read = function (obj) {
      // 查看文件内容
      $.ajax({
        url: suffix + "/logfile/read",
        dataType: 'json',
        data: {path: obj.data['filePath']},
        type: 'get',
        success: function (res) {
          if (res.code == 0) {
            let html = "";
            for (let i = 0; i < res.data.length; i++) {
              html += "<p>" + res.data[i] + "</p>"
            }
            $("#read").html(html);
            layer.open({
              type: 1,
              area: ['95%', '800px'],
              content: $("#read"),
              end: function () {
                $("#end").html("")
              },
              success: function () {
                // setInterval(getLogFile(obj.data.filePath),2000);
              }
            });
          } else {
            layer.msg(res.msg, {
              icon: 2,
              time: 1000
            });
          }
        }
      })
    }

    window.edit = function (obj) {
      console.log(obj)
      layer.open({
        type: 2,
        content: suffix + '/product/add?productId=' + obj.data.productId,
        area: ['940px', '95%'],
        title: '修改'
      });
    }

    window.remove = function (obj) {
      layer.confirm('确定删除', {
        icon: 3,
        title: '提示'
      }, function (index) {
        let loading = layer.load();
        $.ajax({
          url: suffix + "/file/deleteOne",
          dataType: 'json',
          data: {fileId: obj.data['fileId'], existStatus: obj.data['existStatus']},
          type: 'post',
          success: function (result) {
            layer.close(loading);
            if (result.success) {
              layer.msg(result.msg, {
                icon: 1,
                time: 1000
              }, function () {
                table.reload("user-table");
              });
            } else {
              layer.msg(result.msg, {
                icon: 2,
                time: 1000
              });
            }
          }
        })
      });
    }

    window.batchRemove = function (obj) {
      let data = table.checkStatus(obj.config.id).data;
      if (data.length === 0) {
        layer.msg("未选中数据", {
          icon: 3,
          time: 1000
        });
        return false;
      }
      let ids = "";
      for (let i = 0; i < data.length; i++) {
        ids += data[i].goodId + ",";
      }
      ids = ids.substr(0, ids.length - 1);
      layer.confirm('确定删除', {
        icon: 3,
        title: '提示'
      }, function (index) {
        let loading = layer.load();
        $.ajax({
          url: suffix + "/goods/deletes",
          dataType: 'json',
          data: {ids: ids},
          type: 'post',
          success: function (result) {
            layer.close(loading);
            if (result.success) {
              layer.msg(result.msg, {
                icon: 1,
                time: 1000
              }, function () {
                table.reload('user-table');
              });
            } else {
              layer.msg(result.msg, {
                icon: 2,
                time: 1000
              });
            }
          }
        })
      });
    }

    window.refresh = function (param) {
      table.reload('user-table');
    }

    $("#reset").click(function () {
      $("input[name='cond']").val('');
      table.reload('user-table', {
        where: {
          cond: ''
        }
      })
    });


  })
</script>
</body>
<div id="read" style="display: none">

</div>
</html>

